class: left, middle
.pull-left[ ### We Will
Learn frontend development and workflows
Help each other solve problems
Share resources and create a space to learn
Rock you ]
.pull-right[ ### We Won’t - Learn all of CSS/HTML/JS.
That’s not realistic.] — class: inverse, center, middle
Since we don’t want to care about all the 132 tags today, here’s what you want to read up on:
–
<div> Defines a division or section within HTML document.–
<section> Defines a generic section.–
<h1>, <h2>..., <p>, <span> Used to render text.–
Do not use <div> to render just text. This is dirty:
<div> This is my title </div> <!-- Don't -->
But Amannnnn, you ask, why can’t I use <div> everywhere? |
Not everyone browses websites like you do. Semantic HTML helps structure web pages in a way such that people with disabilities (and even those without) can still use them.
While there’s a lot of learn in accessibility, the only rule you need to keep in mind right now is
For instance, the <div> and <span> elements tell nothing about their content. |
|---|
While elements such as <form>, <table> and <article> clearly state what it’s content is meant to display within their tags. |
The prior tags are non-semantic; the later tags are semantic.
CSS is all about targeting HTML elements that we write and styling them. It is pretty simple to understand most of the time. See if you can understand what this does:
<div id="george">
<p> My paragraph here. </p>
<ul>
<li> List Item 1</li>
<li> List Item 2</li>
</ul>
<ul>
<li> List Item 3</li>
<li> List Item 4</li>
</ul>
</div>
#george {
background: #e3e3e3;
border-style: dotted;
border-color: red;
}
My paragraph here.
.left[ |
|---|
| class: inverse, middle, center |
| # Take a sad site and make it sadder |
By the end of this short exercise, you will have a sh*tty website on the internet. Lets go.
I have this stupid website:
.left[]
Maybe this?
.left[]
class: inverse, middle, center
https://github.com/thedivtagguy/activity1
Now open VSCode and press Ctrl + Shift + P and search for Clone.
Paste in the URL and press Enter. You will be prompted to select a location.
Open the cloned files.
You just used Git to fetch from a remote source to your local machine!
In the next part, we will launch this crap into space. First add some ✨ styles to the files.✨
.pull-left[
padding: 10px;
font-size: 15px;
font-weight: bold;
background-color: #c7980b;
border: solid ]
.pull-right[
border-width: 3px;
color: #423e34;
margin-top: 40px;
font-family: sans-serif
]
| # Houston, we’re ready for takeoff. |
| Open up a new terminal in VS Code. Type in the following code: |
| ```js git init // This initializes a new git repository on your machine |
| git add -A // Every time you want to save a new version, you have to add all files to this verion |
| git commit -m “My First Commit” // The commit command saves the version with a message to help you keep track of things ``` |
Now go to Github and create a new repo. After you give it a name, copy the line that looks like this and paste it in your terminal:
git remote add origin github.com/thedivtagguy/activity1.git // This is connecting your local copy to this Github repository
| Finally, write this and press Enter: |
| ```js |
| git push -u -f origin master |
| ``` |
To host our website, we’ll use a service called Netlify. It is a static site hosting service, which means as long as our website doesn’t have a database, we can host it for free, forever.
Go to Netlify.com and login with your Github account
Add a new site. In the options, choose ‘Import Existing Project’
Select Github and search for the repository you just created
Click deploy
In a few minutes, your website will be online with a silly looking URL.
But see, here’s the cool part. Go back to VS Code and make some changes to the text. After you’re done, create a new commit like so:
git add -A
git commit -m "Change of text"
git push
class: inverse, middle, center
Since your Netlify site is connected to your Github repository, every time you push a new commit to your repository, Netlify will rebuild your website and put the new version up online.
This is very useful and as we go deeper into using modern web-development frameworks, you’ll see why this is one of the best ways of working on a project.
background-image: url(https://github.com/yihui/xaringan/releases/download/v0.0.2/karl-moustache.jpg) background-position: 50% 50% class: center, bottom, inverse
Most of the websites we made right now, a few moments ago, are just elements stacked on top of each other. What if we learn how to arrange stuff on the page so that it looks better?
Maybe like this:
.left[]
class: inverse, middle, center
To understand how flexbox works, we’ll play a game called Flexbox Froggy. It sounds lame but hear me out:
Its got frogs. Lets play.
Gururaja has entered the chat
flexboxfroggy.com
class: inverse, middle, center
class: inverse, middle, center
Till now, you’ve used CSS to select elements by classes or IDs. This is useful but CSS has many different ways of allowing you to select objects. It is important to get an understanding of this before we move further.
To do this, we’ll play yet another game.
Head over to https://flukeout.github.io/ and get started.
There are 32 levels, but you only need to get till level 10-12.
class: inverse, middle, center
You’re now armed with the knowledge of:
You’ll never be asked to design the abomination you made in the earlier activity. However, being asked to code a UI screen is extremely likely. If you’re interested in developing the earlier skills further, here’s a challenge.
https://github.com/thedivtagguy/activity2
Note: You will still have to Google what other CSS properties you need to use. Ask questions like ‘How do I make the buttons rounded?’ or ‘How do I change the font?’ and Google them. Lather, rinse, repeat.